<template>
  <AnalysisWrap titleText="坡度坡向" info="提示:可以透明地表，进入地下模式，可以看地下管网等数据。" @goAnalysisOtherViewFn="goAnalysisOtherView">
    <template #container>
      <div class="control">
        <span class="lable">插值数:</span>
        <mars-input-number v-model:value="txtSplitNum" :step="1" :min="1" :max="999" />
      </div>
      <div class="control">
        <span class="lable">地表渲染:</span>
        <a-radio-group v-model:value="radio" @change="onChangeShadingType">
          <a-radio value="none">无阴影</a-radio>
          <a-radio value="slope">坡度</a-radio>
          <a-radio value="aspect">坡向</a-radio>
        </a-radio-group>
      </div>
      <div class="control-play">
        <mars-button class="btn" @click="onClickDrawSlopeExtent">绘制矩形</mars-button>
        <mars-button class="btn" @click="onClickDrawSlope">绘制多边形</mars-button>
        <mars-button class="btn" danger @click="removeSlopeData">清除</mars-button>
      </div>
    </template>
  </AnalysisWrap>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue"
import AnalysisWrap from "./analysis-wrap.vue"
import * as mapWork from "./map"

const emit = defineEmits(["goAnalysisOtherView"])

function goAnalysisOtherView(name: string) {
  emit("goAnalysisOtherView", name)
}

onMounted(() => {
  mapWork.onMountedTerrainSlope()
})
onUnmounted(() => {
  mapWork.onUnmountedTerrainSlope()
})

// 插值数
const txtSplitNum = ref(10)

const onClickDrawSlopeExtent = () => {
  mapWork.onClickDrawSlopeExtent(txtSplitNum.value)
}
const onClickDrawSlope = () => {
  mapWork.onClickDrawSlope(txtSplitNum.value)
}
// 改变地表渲染参数
const radio = ref("none")
const onChangeShadingType = () => {
  mapWork.onChangeShadingType(radio.value)
}

const removeSlopeData = () => {
  mapWork.removeSlopeData()
}
</script>
<style scoped lang="less">
.analysis-content-lable {
  display: block;
  width: 60px;
  text-align: right;
  color: #fff;
}

.control {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .lable {
    width: 93px;
    font-size: 14px;
    text-align: center;
    color: rgba(234, 242, 255, 0.8);
  }
}

.control-play {
  display: flex;
  .btn {
    flex: 1;
    &:nth-child(n + 2) {
      margin-left: 4px;
    }
  }
}

:deep(.ant-radio-group) {
  width: 100%;
  display: flex;
  padding-left: 5px;
  justify-content: space-between;
}
:deep(.ant-radio-inner) {
  border-radius: 0px;
}

:deep(.ant-radio-inner::after) {
  border-radius: 0px !important;
}
</style>
